<script setup lang="ts">
import { roleGetPermissionTreeApi } from '@/apis/role'
import type { RolePermissionTreeI } from '@/types/system'
import { ArrowLeft } from '@element-plus/icons-vue'
import { ref } from 'vue'

// 记录激活的步骤
const activeStep = ref(1)
/**
 * 权限信息
 */
// 权限树
const permissionTree = ref<RolePermissionTreeI[]>([])
const getPermissionTree = async () => {
  permissionTree.value = await roleGetPermissionTreeApi()
}
getPermissionTree()
</script>

<template>
  <div class="role-add">
    <header class="header-container">
      <el-page-header :icon="ArrowLeft" @back="$router.back()">
        <template #content>
          <span class="text-large font-600 mr-3"> 添加角色 </span>
        </template>
        <template #extra>
          <span>黑马管理员</span>
        </template>
      </el-page-header>
    </header>
    <main class="main-container">
      <div class="step-container">
        <el-steps direction="vertical" :active="activeStep">
          <el-step title="角色信息" />
          <el-step title="权限信息" />
          <el-step title="检查并完成" />
        </el-steps>
      </div>
      <div class="form-container">
        <!-- 标题 -->
        <div class="title">
          {{
            activeStep === 1
              ? '角色信息'
              : activeStep === 2
                ? '权限信息'
                : '检查并完成'
          }}
        </div>
        <!-- 角色描述 -->
        <div style="margin: 10px 0 0 8%" v-show="activeStep === 3">
          <div>
            <span class="role-label">角色名称:</span>&nbsp;&nbsp;新增角色是
          </div>
          <div style="margin: 8px 0">
            <span class="role-label">角色描述:</span>&nbsp;&nbsp;新增角色是
          </div>
          <div>
            <span class="role-label">角色权限:</span>&nbsp;&nbsp;新增角色是
          </div>
        </div>
        <!-- 表格 -->
        <el-form
          label-width="100px"
          style="padding: 40px 15%"
          v-show="activeStep === 1"
        >
          <el-form-item label="角色名称:">
            <el-input placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="角色描述:">
            <el-input type="textarea" placeholder="请输入角色描述" :rows="2" />
          </el-form-item>
        </el-form>
        <!-- 权限树 -->
        <div
          class="tree-wrapper"
          style="padding: 20px 10% 40px 10%"
          v-show="activeStep !== 1"
        >
          <div class="tree-item" v-for="item in permissionTree" :key="item.id">
            <div class="tree-title">{{ item.title }}</div>
            <el-tree
              :data="item.children"
              node-key="id"
              ref="treeRef"
              :props="{ label: 'title' }"
              show-checkbox
              default-expand-all
              check-strictly
              :expand-on-click-node="false"
            />
          </div>
          <div class="tree-item"></div>
        </div>
      </div>
    </main>
    <footer class="footer-container">
      <el-button v-show="activeStep !== 1" @click="activeStep--"
        >上一步</el-button
      >
      <el-button type="primary" v-show="activeStep !== 3" @click="activeStep++"
        >下一步</el-button
      >
      <el-button type="primary" v-show="activeStep === 3">确认添加</el-button>
    </footer>
  </div>
</template>

<style scoped lang="scss">
.role-add {
  background-color: #f4f6f8;
  height: 100vh;
  overflow-y: auto;

  /* 隐藏 WebKit 浏览器的滚动条 */
  &::-webkit-scrollbar {
    display: none;
  }

  /* 隐藏 Firefox 的滚动条 */
  scrollbar-width: none;

  /* 隐藏 IE 和 Edge 的滚动条 */
  -ms-overflow-style: none;

  .header-container {
    background-color: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;

    .el-page-header {
      padding: 20px;
    }
  }

  .main-container {
    background-color: #f4f6f8;
    padding: 20px 30px;

    .step-container {
      position: fixed;
      width: 200px;
      height: 242.8px;
      top: 70px;
    }

    .form-container {
      background-color: #fff;
      width: 760px;
      margin: 70px 0 100px;
      margin-left: 50%;
      transform: translateX(-50%);

      .title {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
        border-bottom: 1px solid rgb(237, 237, 237, 0.9);
      }

      .role-label {
        color: rgb(151, 167, 191);
      }

      .tree-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .tree-item {
          flex: 1;
          border-right: 1px solid #e4e7ec;
          padding: 20px 4px;
          text-align: center;

          .tree-title {
            background: #f5f7fa;
            text-align: center;
            padding: 10px 0;
            margin-bottom: 12px;
          }
        }

        .tree-item:nth-child(3),
        .tree-item:nth-child(5),
        .tree-item:nth-child(6) {
          border-right: none;
        }

        .tree-item:nth-child(4),
        .tree-item:nth-child(5),
        .tree-item:nth-child(6) {
          border-top: 1px solid #e4e7ec;
        }
      }
    }
  }

  .footer-container {
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
    padding: 24px 50px;
    color: #000000d9;
    font-size: 14px;
    background: #fff;
    text-align: center;
  }
}
</style>
